<template>
	<view class="">
		<view class="header header_wi" :style="'padding-top: ' + navH + 'px;'">
		    <view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
		        <view class="index_h_cont3">
		            <view class="index_wenben_img" @tap="jumpzuo">
		                <image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image>
		            </view>
		            <view class="index_wenben">评论</view>
		        </view>
		    </view>
		    <view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;'">
			<view class="containers" v-if="total.all >= 0">
			    <!-- 顶部选项卡 -->
			    <view class="swiper-tab dis-flex box-align-center flex-y-center">
			        <view :class="'swiper-tab-item ' + (options.scoreType == -1 ? 'on' : '')" data-current="-1" @tap="swichNav">{{$t('pintuandingdan.pjquanbu')}} ({{ total.all }})</view>
			        <view :class="'swiper-tab-item ' + (options.scoreType == 10 ? 'on' : '')" data-current="10" @tap="swichNav">{{$t('pintuandingdan.pjhao')}} ({{ total.praise }})</view>
			        <view :class="'swiper-tab-item ' + (options.scoreType == 20 ? 'on' : '')" data-current="20" @tap="swichNav">{{$t('pintuandingdan.pjzhong')}} ({{ total.review }})</view>
			        <view :class="'swiper-tab-item ' + (options.scoreType == 30 ? 'on' : '')" data-current="30" @tap="swichNav">{{$t('pintuandingdan.pjcha')}} ({{ total.negative }})</view>
			    </view>
			
			    <!-- 评价列表 -->
			    <scroll-view :scroll-y="true" @scrolltolower="bindDownLoad" :style="'height: ' + swiperHeight + 'px;'">
			        <view class="comment-list" v-if="list.data.length">
			            <view class="comment-item" v-for="(item, index) in list.data" :key="index">
			                <view class="goods-comment-box dis-flex flex-dir-column b-f b-b">
			                    <view class="row dis-flex flex-y-center">
			                        <!-- 用户信息 -->
			                        <view class="user dis-flex flex-y-center">
			                            <image class="user_avatar" mode="aspectFill" :src="item.user.avatarUrl"></image>
			                            <text class="user_name f-26">{{ item.user.nickName }}</text>
			                        </view>
			                        <!-- 评价评星 -->
			                        <view class="com_xing dis-flex flex-y-center">
			                            <text class="iconfont icon-shoucang active"></text>
			                            <block v-if="item.score < 30">
			                                <text class="iconfont icon-shoucang active"></text>
			                                <text class="iconfont icon-shoucang active"></text>
			                            </block>
			                            <block v-if="item.score < 20">
			                                <text class="iconfont icon-shoucang active"></text>
			                                <text class="iconfont icon-shoucang active"></text>
			                            </block>
			                        </view>
			                        <!-- 评价日期-->
			                        <view class="flex-box f-22 col-9 t-r">{{ item.create_time }}</view>
			                    </view>
			                    <!-- 评价内容 -->
			                    <view class="goods-comment-cont row m-top20">
			                        <text class="f-26">{{ item.content }}</text>
			                    </view>
			                    <!-- 评价图片 -->
			                    <view class="comment-images row" v-if="item.image.length">
			                        <view class="image-preview" v-for="(image, imgIndex) in item.image" :key="imgIndex">
			                            <image :data-comment-index="index" :data-img-index="imgIndex" @tap.stop.prevent="previewImages" mode="aspectFill" :src="image.file_path"></image>
			                        </view>
			                    </view>
			                    <!-- 商品规格 -->
			                    <view class="row f-24 col-9">{{ item.order_goods.goods_attr }}</view>
			                </view>
			            </view>
			        </view>
			        <view class="yoshop-notcont" v-else-if="notcont">
			            <text class="iconfont icon-wushuju"></text>
			            <text class="cont">{{$t('pintuandingdan.pjjl')}}</text>
			        </view>
			    </scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
const app = getApp();
export default {
    data() {
        return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
            // 当前tab
            // currentTab: -1,
            // 列表高度
            swiperHeight: 0,

            // 页面参数
            options: {
                goods_id: null,
                scoreType: -1
            },

            // 评论列表
            list: [],

            // 当前页码
            page: 1,

            // show
            notcont: false,

            total: {
                all: 0,
                praise: '',
                review: '',
                negative: ''
            },

            no_more: false,
            length: '',
            imgIndex: 0,

            image: {
                file_path: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let that = this; // 设置swiper的高度
        this.setSwiperHeight(); // 记录页面参数
        that.options.goods_id = options.goods_id;
        that.getCommentList();
    },
    methods: {
		jumpzuo() {
		    uni.navigateBack()
		},
        /**
         * 设置swiper的高度
         */
        setSwiperHeight: function () {
            let systemInfo = uni.getSystemInfoSync();
            let rpx = systemInfo.windowWidth / 750;
			// 计算rpx
            let tapHeight = Math.floor(rpx * 80) + 1;
            let swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
			// 获取系统信息(拿到屏幕宽度)
			this.swiperHeight = swiperHeight;
        },

        /**
         * 获取评论列表
         */
        getCommentList: function (isNextPage, page) {
            let that = this;
            let params = that.options;
            params.page = page || 1;

            app.globalData._get('comment/lists', params, function (result) {
                let resultList = result.data.list;
                let dataList = that.list;
                if (isNextPage !== true || typeof dataList.data === 'undefined') {
					that.list = resultList;
					that.total = result.data.total;
					that.notcont = !resultList.length;
                } else {
					that.list.data = dataList.data.concat(resultList.data);
					that.total = result.data.total;
                }
            });
        },

        /**
         * 点击tab切换
         */
        swichNav: function (e) {
            let that = this;
			that.list = {};
			that.page = 1;
			that.no_more = false;
			that.options.scoreType = e.target.dataset.current;
            that.getCommentList();
        },

        /**
         * 图片预览
         */
        previewImages: function (e) {
            let commentIndex = e.target.dataset.commentIndex;
            let imgIndex = e.target.dataset.imgIndex;
            let images = this.list.data[commentIndex].image;
            let imageUrls = [];
            images.forEach(function (item) {
                imageUrls.push(item.file_path);
            });
            uni.previewImage({
                current: imageUrls[imgIndex],
                urls: imageUrls
            });
        },

        /**
         * 下拉到底加载数据
         */
        bindDownLoad: function () {
            // 已经是最后一页
            if (this.page >= this.list.last_page) {
                this.no_more = true;
                return false;
            }

            this.getCommentList(true, ++this.page);
        }
    }
};
</script>
<style>
@import './comment.css';
</style>
